require(['config'], function () {
  require(['jquery', 'artTemplate', 'cookie'], function ($, template) {

    /***********  渲染页面  *************/
    $.ajax({
      url: '../json/lol.json',
      method: 'GET',
      dataType: 'json',
      // xhrFields: {
      //   withCredentials: true    // 前端设置是否带cookie
      // },
      success: function (data) {
        /* 
            console.log(data[0].valiDate[0].day); // 永久
            console.log(data[0].valiDate[0].name);//名字
            console.log(data[0].valiDate[0].pic);//购物车头像
            console.log(data[0].valiDate[0].picMid);// 展示图片
            console.log(data[0].valiDate[0].code);// 查找代码
            console.log(data[0].valiDate[0].curPrice);// 点券
            console.log(data[0].valiDate[0].iGoldPrice);// 精粹
        */

        //渲染有几页
        let page = 0 //设置页数
        for (let i = 0; i < data.length; i = i + 8) {
          page++
          $('.page>ol').html(`${$('.page>ol').html()}<li >${page}</li>`)
        }
        /****  渲染 一页 的商品 ****/
        function onePageItem(n) {
          let m = 0
          let commodity = []
          for (let i = n; i < n + 8; i++) {
            commodity[m] = data[i]
            m++
          }
          let html = template('commodity', { cart: commodity })
          $('.goodsContent').html(html)
        }
        onePageItem(0)// 初始渲染第一页商品
        $('.page>ol>li:eq(0)').addClass('page_active')// 给第一页按钮添加样式
        /****  点击页数 切换商品 ****/
        $('.page>ol>li').on('click', function () {
          // 给点击的页数添加独特样式
          $(this).addClass('page_active').siblings().removeClass('page_active')
          // 获得第几页开始的索引
          onePageItem(($(this).html() - 1) * 8)
        })
        /******* 点击上一页 *******/
        $('.upper_page').on('click', function () {
          console.log('第一次' + $('.page_active').html());
          if ($('.page_active').html() > 1) {
            $('.page_active').removeClass('page_active').prev().addClass('page_active')
            console.log('第2次' + $('.page_active').html());
            onePageItem(($('.page_active').html() - 1) * 8)
          }
        })
        /******* 点击下一页 *******/
        $('.next_page').on('click', function () {
          if ($('.page_active').html() < $('.page>ol>li').length) {
            $('.page_active').removeClass('page_active').next().addClass('page_active')
            onePageItem(($('.page_active').html() - 1) * 8)
          }
        })
        /******* 搜索 *******/
        $('.search').on('input', function () {
          let word = $(this).val()
          let commodity_arr = data.filter(function (item) {
            return item.valiDate[0].name.includes(word)
          })
          if (commodity_arr.length !== 0) {
            let html = template('commodity', { cart: commodity_arr })
            $('.goodsContent').html(html)
          } else {
            $('.goodsContent').html(
              `<div>
            没有匹配的英雄<br>
            <a href="">重新输入关键字查找</a>
          </div>`
            )
          }
        })

      }
    })


  })
})